@import "../../scss/var";
@import "../../scss/mixin";

$space: 20px;

page{
  background-color: #ebebeb;
}

.recording-page{
  overflow-x: hidden;
}

.book-info-container {
  width: 100%;
  padding: 0 $space;
  background: #fff;
  .book-info-wrapper {
    padding-top: 30px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .title {
      font-size: 36px;
      font-weight: bold;
    }
  }
}


.user-info-container {
  display: flex;
  padding: 0 $space;
  background: #fff;
  .img-wrapper {
    line-height: 0;
  }
  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }
  .user-info-wrapper {
    flex: 1;
    margin-left: 20px;
    .nickname {
      font-size: 32px;
      color: #000;
      font-weight: bold;
      a {
        color: inherit;
      }
    }
    .user-age {
      margin: 11px 0;
      color: #666;
      font-size: 24px;
    }
    .upload-container {
      color: #999;
      font-size: 20px;
    }
  }
  .score-info-wrapper {
    width: 124px;
    height: 120px;
    .score {
      font-size: 24px;
      font-style: italic;
      color: #ff7200;
      line-height: 1;
      text-align: center;
      .num {
        font-size: 80px;
      }
    }
    .desc {
      width: 124px;
      height: 36px;
      background-image: linear-gradient(90deg, #ff7200 0%, #fd9917 100%),
      linear-gradient(#ff7e00, #ff7e00);
      background-blend-mode: normal, normal;
      border-radius: 18px;
      font-size: 24px;
      color: #ffffff;
      text-align: center;
      line-height: 36px;
    }
  }
}


// --- 得分信息
.score-detail-container {
  padding-top: 24px;
  box-sizing: border-box;
  background: #fff;

  .score-detail-wrapper {
    margin: 0 $space;
    display: flex;
    height: 132px;
    border-radius: 16px;
    border: 2px dashed #d7d7d7;
    font-size: 24px;
    color: #999;
    & > .score-detail {
      margin-top: 28px;
      position: relative;
      flex: 1;
      text-align: center;
      &:not(:last-child) {
        &::after {
          content: "";
          position: absolute;
          right: 0;
          top: 14px;
          width: 2px;
          height: 48px;
          background: #d7d7d7;
        }
      }
    }
    .score {
      margin-bottom: 16px;
      font-size: 24px;
      color: #666;
      line-height: 1;
    }
    .num {
      font-size: 48px;
      color: $them;
      line-height: 1;
    }
  }
}


.praise-container {
  padding: 32px $space;
  background-color: #fff;
  .praise-icon-container {
    box-sizing: content-box;
    margin: 0 auto;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    border: 6px solid rgba(205, 205, 205, 0.4);
    color: #cdcdcd;
    &.active {
      border-color: rgba(255, 80, 80, 0.5);
      .praise-wrapper{
        background-color: $red;
      }
      .icon {
        //background-image: url("../assets/praise48X48@2x.png");
      }
    }
    .praise-wrapper{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: #cdcdcd;
      border-radius: 50%;
    }
    .icon {
      height: 48px;
      width: 48px;
    }
  }
  .desc {
    margin-top: 15px;
    font-size: 24px;
    color: #666;
    text-align: center;
    .num {
      color: $red;
    }
  }
}

// --- 评论数
.comment-list-container {
  margin-top: 24px;
  padding: 32px $space 48px;
  background-color: #fff;

  .header {
    padding-bottom: 27px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .title {
    font-size: 36px;
    color: #000;
    font-weight: bold;
    .num {
      display: inline-block;
      margin: 0 1px;
      color: #999;
      &.active {
        color: #ff5050;
      }
    }
  }

  .comment-list {
    .comment-wrapper {
      display: flex;
      align-items: flex-start;
      padding-bottom: 24px;
      .img-wrapper {
        flex: 0 0 72px;
        height: 72px;
        line-height: 0;
        .img {
          width: 100%;
          height: 100%;
          background-color: #999;
          border-radius: 50%;
        }
      }
      .comment {
        flex: 1;
        margin-left: 16px;
        .user-wrapper {
          position: relative;
          margin-top: 9px;
          .user{
            position: relative;
          }
          .nickname {
            margin-bottom: 11px;
            font-size: 28px;
            font-weight: bold;
            line-height: 1;
          }
          .age {
            font-size: 22px;
            line-height: 1;
            color: #999;
          }
          .delete {
            position: absolute;
            right: 0;
            top: 50%;
            padding: 2px;
            height: 40px;
            width: 40px;
            transform: translateY(-50%);
            color: #ff5050;
            font-size: 24px;
          }
        }

        .content {
          margin-top: 10px;
          padding: 16px 24px;
          background-color: #ebebeb;
          border-radius: 4px;
          font-size: 32px;
          color: #000;
          word-break: break-all;
        }
      }
    }
  }

  .input-container {
    display: flex;
    margin: 0 0 30px;
    line-height: 78px;
    box-sizing: border-box;
    padding-left: 28px;
    height: 78px;
    width: 100%;
    border-radius: 39px;
    font-size: 28px;
    background-color: #ebebeb;
    .input {
      height: 78px;
      flex: auto;
      background-color: transparent;
    }

    .comment-btn {
      width: 142px;
      height: 78px;
      border-radius: 39px;
      color: #fff;
      background-image: linear-gradient(0deg,
        #30c27c 1%,
        #34d789 100%),
      linear-gradient(
          #f4f4f4,
          #f4f4f4);
      font-size: 32px;
      text-align: center;
    }
  }
}

.footer-tips {
  line-height: 80px;
  font-size: 24px;
  text-align: center;
  color: #999;
}
// 评论数 ---

.at-modal__content{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
